<template>
  <el-dialog title="老师选择" :close-on-click-modal="false" width="1000px" class="cu-dialog cu-dialog_center table-dialog"
    lock-scroll append-to-body v-bind="$attrs" v-on="$listeners">
    <el-row class="cu-common-search-box" :gutter="16">
      <el-form @submit.native.prevent>
        <el-col :span="10">
          <el-form-item label="关键词">
            <el-input v-model="keyword" placeholder="请输入关键词查询" clearable @keyup.enter.native="initData()" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="initData()">
              {{$t('common.search')}}</el-button>
            <el-button icon="el-icon-refresh-right" @click="refresh()">{{$t('common.reset')}}
            </el-button>
          </el-form-item>
        </el-col>
      </el-form>
      <div class="cu-common-search-box-right">
        <el-tooltip effect="dark" :content="$t('common.refresh')" placement="top">
          <el-link icon="icon-ym icon-ym-Refresh cu-common-head-icon" :underline="false" @click="refresh()" />
        </el-tooltip>
      </div>
    </el-row>
    <custom-table :ref="'teacherTable'" :row-key="getRowKey" v-loading="listLoading" :data="list"
      @selection-change="handleSelectionChange" border>
      <el-table-column type="selection" width="50" align="center" :selectable="checkSelect" :reserve-selection="true" />
      <el-table-column prop="teacherName" label="老师姓名" width="90" />
      <el-table-column prop="gender" label="性别" width="60" align="center">
        <template slot-scope="scope">
          {{scope.row.gender==1?'男':'女'}}
        </template>
      </el-table-column>
      <el-table-column prop="mobile" label="手机号码" width="120" align="center" />
      <el-table-column prop="idCard" label="身份证号码" width="150" align="center" />
<!--      <el-table-column prop="entryDate" label="入职时间" width="110" :formatter="custom.tableDateFormat" align="center" />-->
      <el-table-column v-if="custom.hasP('photo')" prop="photo" label="证件照" align="left" width="100">
        <template slot-scope="scope">
          <el-image v-if="scope.row.idPhoto != null" :src="'https://qiniu.anqinyun.com/' + scope.row.idPhoto"
            fit="scale-down" lazy :preview-src-list="['https://qiniu.anqinyun.com/' + scope.row.idPhoto]">
          </el-image>
        </template>
      </el-table-column>
      <el-table-column prop="message" label="消息提示">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.message!=''" type="danger">{{scope.row.message}}</el-tag>
        </template>
      </el-table-column>
    </custom-table>
    <span slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">{{$t('common.cancelButton')}}</el-button>
      <el-button type="primary" @click="select()">{{$t('common.confirmButton')}}</el-button>
    </span>
  </el-dialog>
</template>

  <script>
import request from '@/utils/request'
import { getCampusTeacherList } from "@/api/campus/campus"
export default {
  props: ['trainId', 'campusId'],
  data () {
    return {
      listLoading: true,
      keyword: '',
      list: [],
      checked: [],
      checkList: []
    }
  },
  methods: {
    closeDialog () {
      this.$emit('update:visible', false)
    },
    async refresh () {
      this.keyword = ''
      await this.initData()
    },
    async initData (list) {
      this.checkList = list
      this.listLoading = true
      request({
        url: `api/train/order/${this.trainId || ''}/${this.campusId || ''}`,
        method: 'get',
      }).then((res) => {
        this.list = res.data.teachers.filter(i => i.status == null)
        this.listLoading = false
        this.$nextTick(() => {
          this.handledCheck()
        })
      })

    },
    handledCheck () {
      this.$refs.teacherTable.$refs.CustomTable.clearSelection([]);
      this.$nextTick(() => {
        this.checkList.forEach(row => {
          this.list.map(item => {
            if (row.teacherId === item.teacherId) {
              this.$refs.teacherTable.$refs.CustomTable.toggleRowSelection(item);
            }
          })
        });
      })
    },
    //勾选置灰
    checkSelect (row, index) {
      let isChecked = true;
      if (row.message != "") { // 判断里面是否存在某个参数
        isChecked = false
      } else {
        isChecked = true
      }
      return isChecked
    },
    getRowKey (row) {
      return row.teacherId; //每条数据的唯一识别值
    },
    select () {
      this.$emit('closeForm', this.checked)
      this.$emit('update:visible', false)
    },
    handleSelectionChange (val) {
      this.checked = val
    }
  }
}
  </script>
  <style lang="scss" scoped>
.table-dialog {
  >>> .el-dialog__body {
    height: 70vh;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    overflow: auto;
    .cu-common-search-box {
      margin-bottom: 0;
      .cu-common-search-box-right {
        padding: 10px 10px 0 0;
      }
    }
  }
}
</style>
